<script setup lang='ts'>
import { AlertProps } from './type';
import Icon from '../Icon/Icon.vue'
import { ref } from 'vue';
defineOptions({
    name: 'Alert'
})
let isClose = ref(false);
defineProps<AlertProps>();

const closeAlert = () => {
  isClose.value = true;
};
</script>

<template>
    <Transition name="alert">
    <div
      class="vk-alert"
      :class="{
        [`vk-alert--${type}`]: type,
        [`is-${effect || 'light'}`]: effect || 'light',
      }"
      v-if="!isClose"
    >
      <div class="left">
        <Icon :icon="icon" v-if="icon"></Icon>
        <slot></slot>
      </div>
      <Icon icon="times" v-if="closable" @click="closeAlert"></Icon>
    </div>
  </Transition>
</template>

<style lang='scss' scoped>

</style>
